<template>
	<view class="content-box">
		<view class="main-box">
			<view class="logo-box">
				<image class="wh100" :src="$imgSrc('static/images/logo.png')"></image>
			</view>

			<view class="input-item"> <text>+86</text> <input type="number" placeholder="请输入手机号" v-model="phone">
			</view>
			<view class="input-item">
				<input type="number" placeholder="请输入验证码" v-model="code">
				<view class="code-box">
					<u-code ref="uCode2" @change="codeChange2" keep-running start-text="获取验证码"></u-code>
					<text @tap="getCode2" :text="tips2" class="u-page__code-text">{{tips2}}</text>
				</view>
			</view>

			<view class="agree-box" @click="isChecked=!isChecked">
				<image v-show="isChecked" :src="$imgSrc('static/images/icon-checked.png')"></image>
				<image v-show="!isChecked" :src="$imgSrc('static/images/icon-check.png')"></image>
				<text class="agree-text">我已阅读并同意 <text>《用户服务协议与隐私协议》</text> </text>
			</view>

			<view class="login-box flex" @click="loginTap">登录</view>

			<view class="line-box flex">
				<image :src="$imgSrc('static/images/guoke/line.png')"></image>
				<text>其他登录方式</text>
				<image style="transform: rotate(180deg);" :src="$imgSrc('static/images/guoke/line.png')"></image>
			</view>

			<image @click="mpwxlogin" class="weixin-box" :src="$imgSrc('static/images/guoke/icon-weixin.png')"></image>
		</view>
		<u-popup mode="center" :show="show">
			<view class="my-popup">
				<view class="law-userinfo">
					<button :class="['law-userinfo__avatar']" open-type="chooseAvatar" @chooseavatar="chooseavatar">
						<image v-if="wx_info.img" class="law-userinfo__avatar" :src="wx_info.img" mode="">
						</image>
					</button>

					<view class="law-userinfo__right">
						<view class="law-userinfo__right__name"> 昵称：</view>
						<input class="law-userinfo__right__name input" id="nickname" type="nickname" placeholder="请输入昵称"
							@blur="onBlur" v-model="userName" />
					</view>
				</view>
				<view class="definition">
					请完成微信授权以继续使用
				</view>
				<view @click="wx_login" :class="wx_info.nickname==''||wx_info.img==''?'my-bnt hbnt':'my-bnt'">
					获取手机号
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				phone: '',
				code: '',
				isChecked: false,
				tips2: '',
				disabled3: false,
				userName:"",
				wx_info: {
					img: "",
					nickname: ""
				}
			}
		},

		onShow() {

		},

		onLoad() {

		},

		methods: {
			codeChange2(text) {
				this.tips2 = text;
			},
			getCode2() {
				if (this.phone == "") {
					this.$toast({
						title: "输入手机号"
					});
					return;
				}
				if (this.$refs.uCode2.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					});
					this.$api['get']('base/send-sms', {
						phone: this.phone
					}).then(res => {
						if (res.code == 200) {
							uni.setStorageSync("code_key", res.data.key);
							uni.hideLoading();
							this.$refs.uCode2.start();
							uni.$u.toast('验证码已发送');
						} else {
							uni.$u.toast(res.message.message);
						}
					});




				} else {
					//uni.$u.toast('倒计时结束后再发送');
				}
			},
			loginTap() {
				if (!this.isChecked) {
					this.$toast({
						title: "请勾选用户协议"
					});
					return;
				}
				if (this.phone == "") {
					this.$toast({
						title: "输入手机号"
					});
					return;
				}
				if (this.code == "") {
					this.$toast({
						title: "请输入验证码"
					});
					return;
				}
				var code_key = uni.getStorageSync("code_key");
				this.$api['post']('auth/phone-login', {
					phone: this.phone,
					code: this.code,
					key: code_key
				}).then(res => {
					if (res.code == 200) {
						this.$toast({
							title: "登录成功"
						});
						uni.setStorageSync('LOGIN_TOKEN_KEY', res.data.token);
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 1000)
					} else {
						this.$toast({
							title: res.message
						});
					}
				});

			},
			mpwxlogin() {
				var _this = this;
				if (!this.isChecked) {
					this.$toast({
						title: "请勾选用户协议"
					});
					return;
				}
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						_this.$api['post']('common/wx-official', {
							code: loginRes.code
						}).then(res => {
							if (res.code == 200) {
								if (res.data.openid != undefined) {
									_this.wx_info.openid = res.data.openid;
									_this.show = true;
									return;
								}

							} else {
								_this.$toast({
									title: res.message.message
								});
							}
						});

					}
				});
			},
			wx_login(){
				if(this.wx_info.openid==""||this.wx_info.img==""){
					return;
				}
				uni.setStorageSync("wx_info",JSON.stringify(this.wx_info));
				uni.navigateTo({
					url:"/pages/bind/bind"
				})
			},
			// 获取头像
			chooseavatar(e) {
				uni.uploadFile({
					url: "https://kefu.juhuilm.cn/api/common/mpupload/image",
					filePath: e.detail.avatarUrl,
					name: 'image',
					success: uploadFileRes => {
						const data = JSON.parse(uploadFileRes.data);
						this.wx_info.img = data.data;
					},
					fail: (fail) => {
						console.log(fail)
					},
				});
			},
			// 获取用户昵称
			onBlur() {
				const view = uni.createSelectorQuery()
					.in(this)
					.select('#nickname');
				view.fields({
						properties: ['value']
					},
					data => {
						//console.log(data,"==data===");
						if (!this.wx_info.nickname) {
							this.userName = data.value;
							this.wx_info.nickname = Base64.encode(data.value);
						}
					}
				).exec();
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
		background: #fff;
	}

	.definition {
		font-size: 28upx;
		color: #666666;
		margin-bottom: 31upx;
		text-align: center;
	}

	.content-box {
		width: 750upx;
		height: 100%;
		background: linear-gradient(180deg, #82CBFE 0%, #D2ECFE 40%, rgba(255, 255, 255, 0) 70%);
		border-radius: 0upx 0upx 0upx 0upx;

		.main-box {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 204upx;
			box-sizing: border-box;

			.logo-box {
				width: 160upx;
				height: 160upx;
				margin-bottom: 24upx;
			}

			.input-item {
				width: 570upx;
				height: 88upx;
				background: #FFFFFF;
				border-radius: 16upx 16upx 16upx 16upx;
				margin-top: 40upx;
				display: flex;
				align-items: center;

				&>text {
					width: 100upx;
					height: 36upx;
					border-right: 2upx solid #999;
					text-align: center;
					font-size: 28upx;
					font-weight: 500;
					color: #000000;
					line-height: 36upx;
				}

				&>input {
					flex: 1;
					height: 100%;
					display: flex;
					align-items: center;
					padding-left: 24upx;
					box-sizing: border-box;
					font-size: 28upx;
					color: #999;
				}

				.code-box {
					width: 170upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26upx;
					font-weight: 500;
					color: #0195FD;
				}
			}

			.agree-box {
				width: 570upx;
				margin: 64upx 0 48upx 0;
				display: flex;
				align-items: center;

				&>image {
					width: 36upx;
					height: 36upx;
					margin-right: 6upx;
				}

				.agree-text {
					font-size: 24upx;
					font-weight: 400;
					color: #999999;

					text {
						color: #0195FD !important
					}
				}
			}

			.login-box {
				width: 570upx;
				height: 88upx;
				background: #0195FD;
				border-radius: 48upx 48upx 48upx 48upx;

				font-size: 32upx;
				font-weight: 500;
				color: #FFFFFF;
			}

			.line-box {
				width: 570upx;
				height: 40upx;
				margin: 180upx 0 36upx 0;

				&>text {
					display: inline-block;
					padding: 0 20upx;
					line-height: 40upx;
					font-size: 28upx;
					font-weight: 400;
					color: #333333;
				}

				image {
					width: 112upx;
					height: 2upx;
				}
			}

			.weixin-box {
				width: 72upx;
				height: 72upx;
			}
		}
	}

	.my-popup {
		background: #fff;
		padding: 50upx 20upx;
		overflow: hidden;
		border-radius: 10upx;
	}

	.law-userinfo {
		margin: 28upx 20upx 62upx;
		background: #ffffff;
		border-radius: 12upx;
		padding: 56upx 32upx;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		&__avatar {
			width: 140upx;
			height: 140upx;
			border-radius: 50%;
			flex-shrink: 0;
			padding: 0;
			border-radius: 50%;
			box-sizing: border-box;
			font-size: 24upx;
			line-height: 140upx;
			text-align: center;

			&.border {
				border: 2upx solid #e7e9eb;
			}

			&::after {
				border: none;
			}
		}

		&__right {
			display: flex;
			justify-content: center;
			align-items: center;

			&__name {
				margin-top: 40upx;
			}
		}

		.input {
			border-bottom: 1px solid #e7e9eb;
		}
	}

	.hbnt {
		background: #AEAEAE !important;
	}
</style>